<%@ page isELIgnored="false" contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>55社区田园</title>
    <meta name="description" content="">
    <meta name="keywords" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <meta name="renderer" content="webkit">
    <meta http-equiv="Cache-Control" content="no-siteapp" />
    <link rel="icon" type="image/png" href="/theme/default/images/favicon.png">
    <link href="${ctx}/static/phone/css/amazeui.min.css" rel="stylesheet" type="text/css" />
    <link href="${ctx}/static/phone/css/style.css" rel="stylesheet" type="text/css" />
    <script src="${ctx}/static/phone/js/jquery-1.10.2.min.js"></script>
    <script src="${ctx}/static/phone/js/time.js"></script>
    <script>
        $(function () {
            var elm = $('#shortbar');
            var startPos = $(elm).offset().top;
            $.event.add(window, "scroll", function () {
                var p = $(window).scrollTop();
                if (p > startPos) {
                    elm.addClass('sortbar-fixed');
                } else {
                    elm.removeClass('sortbar-fixed');
                }
            });
        });

    </script>
</head>
<body>
<!--图片轮换-->
<div class="am-slider am-slider-default" data-am-flexslider id="demo-slider-0" style="position: relative;">
    <header data-am-widget="header" class="am-header am-header-default tm-head" id="shortbar" >
        <div class="am-header-left am-header-nav">
            <a href="city.html" class="">
                <img src="${ctx}/static/phone/images/city.png" />
                <p style="font-size: 12px; margin-top: -35px;">南昌</p>
            </a>
        </div>
        <h1 class="am-header-title1">
            <div class="search-box">
                <input type="text" name="title" class="index-search" placeholder="寻找你喜欢的商品......" />
                <input type="submit" value="" class="search-icon" />
            </div>
        </h1>
        <div class="am-header-right am-header-nav">

            <a href="" class="">
                <img src="${ctx}/static/phone/images/sao.png" />
                <p style="font-size: 12px; margin-top: -35px;">扫一扫</p>
            </a>
        </div>
    </header>
    <ul class="am-slides">
        <li><img src="${ctx}/static/phone/images/banner1.png" /></li>
        <li><img src="${ctx}/static/phone/images/banner1.png" /></li>
    </ul>
</div>
<!--导航-->
<ul class="sq-nav"  >
    <li>
        <div class="am-gallery-item">
            <a href="newgoods.do" class="">
                <img src="${ctx}/static/phone/images/icon.png" />
                <p>新品</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="specialprice.do" class="">
                <img src="${ctx}/static/phone/images/icon1.png" />
                <p>特价</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="reserve.do" class="">
                <img src="${ctx}/static/phone/images/icon2.png" />
                <p>预定</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="/phone/integral.jsp" class="">
                <img src="${ctx}/static/phone/images/icon3.png" />
                <p>积分</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="allchips.do" class="">
                <img src="${ctx}/static/phone/images/icon4.png" />
                <p>众筹</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="/phone/whitebar.jsp" class="">
                <img src="${ctx}/static/phone/images/icon5.png" />
                <p>白条</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="news.html" class="">
                <img src="${ctx}/static/phone/images/icon6.png" />
                <p>头条</p>
            </a>
        </div>
    </li>
    <li>
        <div class="am-gallery-item">
            <a href="/category/category_list.do" class="">
                <img src="${ctx}/static/phone/images/icon7.png" />
                <p>分类</p>
            </a>
        </div>
    </li>
</ul>
<!--限时秒杀 -->
<div class="sq-title">
    <i class="am-icon-volume-up"></i>
    <div class="fnTimeCountDown" data-end="2018/07/08 18:45:13">
        限时秒杀：距开抢
        <span class="hour">00</span>
        <strong>:</strong>
        <span class="mini">00</span>
        <strong>:</strong>
        <span class="sec">00</span>
    </div>
    <script type="text/javascript">
        $(".fnTimeCountDown").fnTimeCountDown("2018/07/08 18:45:13");
    </script>
</div>
<ul data-am-widget="gallery" class="am-gallery pro-list am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default"  >
    <c:forEach var="goods" items="${goodsList}">
        <li>
            <div class="am-gallery-item">
                <a href="/category/goods_detail.do?id=${goods.goods_id}" class="">
                    <img src=" ${ctx}/static/phone/${goods.goods_img}" />
                    <h3 class="am-gallery-title">${goods.goods_name}</h3>
                    <div class="am-gallery-desc">￥${goods.goods_price}</div>
                </a>
            </div>
        </li>
    </c:forEach>

</ul>
<!-- 特色专区-->
<div class="sq-title">
    <img src="${ctx}/static/phone/images/ts.png" width="24"/>
    特色专区
</div>
<ul data-am-widget="gallery" class="am-gallery pro-list am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default"  >
    <c:forEach var="goods" items="${goodsList}">
        <li>
            <div class="am-gallery-item">
                <a href="/category/goods_detail.do?id=${goods.goods_id}" class="">
                    <img src=" ${ctx}/static/phone/${goods.goods_img}" />
                    <h3 class="am-gallery-title">${goods.goods_name}</h3>
                    <div class="am-gallery-desc">￥${goods.goods_price}</div>
                </a>
            </div>
        </li>
    </c:forEach>
</ul>
<!-- 精品专区-->
<div class="sq-title">
    <img src="${ctx}/static/phone/images/jp.png" width="24"/>
    精品专区
</div>
<ul data-am-widget="gallery" class="am-gallery pro-list am-avg-sm-3 am-avg-md-3 am-avg-lg-4 am-gallery-default"  >
    <c:forEach var="goods" items="${goodsList}">
        <li>
            <div class="am-gallery-item">
                <a href="/category/goods_detail.do?id=${goods.goods_id}" class="">
                    <img src=" ${ctx}/static/phone/${goods.goods_img}" />
                    <h3 class="am-gallery-title">${goods.goods_name}</h3>
                    <div class="am-gallery-desc">￥${goods.goods_price}</div>
                </a>
            </div>
        </li>
    </c:forEach>
</ul>
<!-- 便民-->
<div class="sq-title">
    <img src="${ctx}/static/phone/images/bm.png" width="24"/>
    便民服务
</div>
<ul class="yule">
    <c:forEach var="news" items="${newsList}">
        <li>
            <a href="news_detail.do?id=${news.news_id}">
                <img src="${ctx}/static/phone/${news.news_img}">
                <div style="width: 70%; float: left;">
                    <h3 class="title">${news.news_title}</h3>
                    <div class="introDiv"><p class="intro">${news.news_content}</p></div>
                </div>
            </a>
        </li>
    </c:forEach>

</ul>
<!--底部-->
<jsp:include page="commonBottom.jsp"></jsp:include>


<script type="text/javascript">
    /*js去掉所有html标记的函数： */
    function delHtmlTag(str) {
        return str.replace(/<[^>]+>/g, "");//去掉所有的html标记
    }

    $(function () {
        var intro = $(".introDiv");
        intro.each(function () {
            var con =delHtmlTag($(this).html());
            if(con.length>20){//长度太长取一百个字
                con=con.substring(0,20)+"......";
            }
            $(this).html(con)
        })
    })
</script>



<script src="${ctx}/static/phone/js/jquery.min.js"></script>
<script src="${ctx}/static/phone/js/amazeui.min.js"></script>
</body>
</html>
